<template>
	<view class="videoDetails">
		<header :style="'padding-top: '+height.top+'px;height: '+(44+height.top)+'px;'">
			<image :style="'height: '+(44+height.top)+'px;'" src="../../../static/home/4.png" mode="aspectFill"></image>
			<view :style="'height: '+height.height+'px;top: '+height.top+';'">
				<u-icon @click="retreat(1)" name="arrow-left" color="#272635" size="32"></u-icon>
				<span>{{title}}</span>
			</view>
		</header>
		<main v-if="data.content&&is_view==1">
			<video id="myVideo" :src="URLimg+data.content" @error="videoErrorCallback" controls></video>
			<p>{{data.title}}</p>
		</main>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '详细',
				is_view: 0,
				URLimg: this.URLimg,
				height: {},
				data: {},
			};
		},
		onLoad() {
			this.is_view = uni.getStorageSync('isView')
			if(this.is_view==1){
				this.title='视频详细'
			}
			this.data = uni.getStorageSync('mp4')
			this.height = uni.getStorageSync('header')
		},
		methods: {
			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			retreat: (delta) => {
				uni.navigateBack({
					delta,
				});
			},
		}
	}
</script>

<style lang="scss">
	.videoDetails {

		&>main {
			position: relative;
			width: 690rpx;
			height: 1360rpx;
			margin: 0 auto;

			&>p {
				width: 100%;
				height: 60rpx;
				background: rgba(0, 0, 0, 0.73);
				position: absolute;
				left: 0;
				bottom: 0;
				font-size: 15px;
				color: #fff;
				line-height: 60rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				@include csstext(1);
			}

			&>video {
				width: 690rpx;
				height: 1260rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
		}

		&>header {
			width: 750rpx;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 999;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			&>view {
				width: 690rpx;
				z-index: 999;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&>span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 18px;
					font-weight: bold;
				}

				&>.u-icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&>image {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 998;
				@include cssimg;
			}
		}
	}
</style>